<template>
  <view class="main">
    <view class="ip-item">
      <input type="text" placeholder="请在微信复制链接" placeholder-class="ip" v-model="formData.link" />
    </view>
    <view class="ip-item">
      <textarea maxlength="300" v-model="formData.content" type="text" placeholder="填写推荐理由获得更多群友关注"
        placeholder-class="ip" class="text-area" />
      <view class="number">
        {{ descNumber + "/" + 300 }}
      </view>
    </view>
    <view class="ip-item" @click="groupShow = true">
      <input type="text" v-model="circleName" placeholder="请选择推荐到的社区" disabled placeholder-class="ip" />
      <image src="/static/icon/down.svg" mode="widthFix" />
    </view>
    <view>
      <view class="title-block dispaly-center">
        <view class="title-line"></view>
        <view class="title-text">推荐规则</view>
      </view>
      <view>
        <rich-text :nodes="detail"></rich-text>
      </view>
    </view>
  </view>
  <view class="btns">
    <Button @clickButton="carete" :loading="loading" loading-text="提交中" text="提交" />
  </view>

  <!-- 入群填写项 -->
  <van-popup  v-model:show="groupShow" position="bottom" round :style="{ padding: '40rpx 40rpx 100rpx 40rpx' }">
    <view class="m-b-30" style="display: flex; justify-content: flex-end;">
      <van-button type="primary" @click="cofirmSearch" size="small">确定</van-button>
    </view>
    <van-checkbox-group v-model="circleIds" shape="square">
      <van-checkbox icon-size="14px" style="margin-bottom: 16rpx" v-for="(item,index)  in myCircleList" :key="index" :name="item.id">{{item.name}}</van-checkbox>
    </van-checkbox-group>

<!--    <van-picker :columns-field-names="{ text: 'name', value: 'id' }" title="关联圈子" :columns="myCircleList"-->
<!--      @confirm="onConfirm" @cancel="groupShow = false" />-->
  </van-popup>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { proxy, myCircle, submitForSale } from "@/api/apiList";
// 推荐规则
const detail = ref(`
`);

const getProxy = async () => {
  const res = await proxy('recommend')
  if (res.code == 200) {
    console.log(res, 'res')
    detail.value = res.data.recommend
  }
}
getProxy()

const myCircleList = ref([])
const getCircle = async () => {
  const res = await myCircle()
  if (res.code == 200) {
    myCircleList.value = res.data
    console.log(myCircleList.value, 'myCircleList.value')
  }
}
getCircle()

const circleName = ref('')
const onConfirm = (data) => {
  circleName.value = data.selectedOptions[0].name
  formData.value.circleId = data.selectedOptions[0].id
  groupShow.value = false
}

const groupShow = ref(false);
const circleIds = ref([]);
const formData = ref({
  circleIds:[],
  type: 0,
  content: '',
  link: '',
  source: 2
});

// 监听输入的详情字数
const descNumber = ref(0);
watch(
  () => formData.value.content,
  () => {
    descNumber.value = formData.value.content.length;
  },
  { deep: true }
);


onLoad(() => { });

const loading = ref(false);
const carete = async () => {
  const { link, content, circleId } = formData.value
  if (!link) {
    uni.showToast({
      title: '请填写链接',
      icon: 'none'
    })
    return
  }
  if (!content) {
    uni.showToast({
      title: '请填写推荐理由',
      icon: 'none'
    })
    return
  }
  if(circleIds.value.length <1){
    return uni.showToast({
      title: '请选择关联圈子',
      icon: 'none'
    })
  }
  formData.value.circleIds = circleIds.value;
  const res = await submitForSale(formData.value)
  loading.value = true;
  if (res.code == 200) {
    uni.showToast({
      title: "提交成功",
      icon: "none",
    });
    setTimeout(() => {
      loading.value = false;
      uni.navigateBack()
    }, 1000);
  }

};

// 点击搜索
const cofirmSearch = () =>{
  groupShow.value = false;
}
    // groupShow
</script>

<style lang="scss" scoped>
.main {
  padding: 30rpx;
}

.must {
  color: #aaaaaa;
}

.active {
  color: #0753fd !important;
}

.btns {
  padding: 0 30rpx;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 66rpx;
}

.pop-main {
  .pop-title {
    border-bottom: 1rpx solid #eee;
    padding: 34rpx 40rpx;

    .cancel,
    .confirm {
      font-family: PingFang SC Bold;
      font-size: 32rpx;
    }

    .cancel {
      color: #aaaaaa;
    }

    .confirm {
      color: #0753fd;
    }
  }

  .list {
    padding: 0 40rpx;

    .scroll-Y {
      height: 1000rpx;
      max-height: 1000rpx;

      .item {
        font-family: PingFang SC Bold;
        font-size: 28rpx;
        font-weight: normal;
        padding: 25rpx 0;
      }
    }
  }
}
</style>
